<!--单图上传组件/按钮-->
<template>
  <div>
    <div v-show="visiable1" style="margin-left: -38px">
      <draggable class="syllable_el" tag="ul" :list="$store.state.detailsUploadList" v-bind="{ group: 'title', animation: 150 }" :no-transition-on-drag="true"
                 :move="move" @change="change" @start="start" @end="end">
        <div v-for="(item, index) in $store.state.detailsUploadList"
             :key="index" style="width: 85px; float: left">
          <div class="demo-upload-list">
            <img :src="imageUtils(imgUrl,item.url)" alt=""/>
            <div class="demo-upload-list-cover">
              <el-icon class="el-icon-zoom-in" @click.native="handlePictureCardPreview(imageUtils(imgUrl,item.url))"/>
              <el-icon class="el-icon-delete-solid" @click.native="handleRemove(index)"/>
            </div>
          </div>
        </div>
      </draggable>
    </div>
    <div>
      <el-upload class="avatar-uploader" action="#" multiple accept=".jpg,.jpeg,.png,.webp" :show-file-list="true" :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus avatar-uploader-icon" style="width: 65px; height: 65px"/>
      </el-upload>
    </div>
    <div>
      <el-dialog width="30%" :visible.sync="dialogVisible" append-to-body>
        <img width="100%;height: 350px" :src="dialogImageUrl" alt=""/>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import "@/styles/mixin.scss";
import imgUrl, { isBlank, isFlag } from "@/utils/util";
import { imageUtils } from '@/utils/imageUtil'

export default {
  components: {
    draggable,
    imgUrl
  },
  props: ["imgUrl", "maxNumber"],
  data() {
    return {
      dialogImageUrl: "",
      cover: "",
      detailsUploadList: [],
      myImage: imgUrl.myImage,
      dialogVisible: false,
      disabled: false,
      visiable: false,
      visiable1: true,
      imageUrl: "",
      coverUrl: "",
      imgName: ""
    };
  },
  watch: {
    "$store.state.detailsUploadList": "updateDom"
  },
  created() {
    this.$store.state.detailsUploadList = [];
  },
  mounted() {
  },
  methods: {
    imageUtils,
    beforeAvatarUpload(file) {
      let maxLength = isBlank(this.maxNumber) ? 99 : this.maxNumber;
      this.handleMaxSize(file, 2).then((res) => {
        if (isFlag(res, true)) {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            if (this.$store.state.detailsUploadList.length < maxLength) {
              file.url = reader.result;
              this.$store.state.detailsUploadList.push(file);
              this.updateDom();
            }
          };
        }
      });
    },
    handleMaxSize(file, size) {
      if (isBlank(size) || isFlag(size, 0)) {
        size = 3;
      }
      const fileSize = file.size / 1024 / 1024 < size;
      return new Promise((resolve, reject) => {
        if (!fileSize) {
          this.$message.error(`文件过大,请不要超过${size}M.`);
          return resolve(false);
        } else {
          return resolve(true);
        }
      });
    },
    handleRemove(index) {
      this.$store.state.detailsUploadList.splice(index, 1);
      this.updateDom();
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    updateDom() {
      this.visiable1 = false;
      this.$nextTick(() => {
        this.visiable1 = true;
      });
    },
    change(evt) {
      if (!isBlank(evt.moved)) {
        let newDate = this.$store.state.detailsUploadList[evt.moved.newIndex];
        let oldDate = this.$store.state.detailsUploadList[evt.moved.oldIndex];
        if (!isBlank(newDate.sort) && !isBlank(oldDate.sort)) {
          newDate.sort = evt.moved.newIndex;
          oldDate.sort = evt.moved.oldIndex;
        }
      }
    },
    start(evt) {
    },
    end(evt) {
      evt.item; // 可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    },
    move(evt, originalEvent) {
    }
  }
};
</script>

<style lang="scss" scoped>
.upload-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
}
</style>
